<template>
    <div class="AddSong">
      <h2>歌曲管理-->>添加歌曲</h2>
      <div class="s">
      歌名:
        <el-input  v-model="singName" placeholder="请输入内容" clearable></el-input>
      歌手:
        <el-input  v-model="singer" placeholder="请输入内容" clearable></el-input>
      专辑:
        <el-input  v-model="singAlbum" placeholder="请输入内容" clearable></el-input>
      类型:
        <el-input  v-model="singType" placeholder="请输入内容" clearable></el-input>
      </div>
      <div>
        <el-button type="primary"  @click="add()">添加</el-button>
      </div>


    </div>

</template>

<script>
import axios from "axios";
    export default {
        name: "AddSong",
      data() {
        return {
                singName:"",
                singer:"",
                singAlbum:"",
                singType:""
        }
      },
      methods:{
          add(){
            axios({
              methods:"get",
              url:"http://localhost:3000/add",
              params:{
                singName:this.singName,
                singer:this.singer,
                singAlbum:this.singAlbum,
                singType:this.singType
              }
            }).then(res=>{
              console.log(res);
              alert("添加成功");
            }).catch((err)=>{
              alert("添加失败，请重试");
              console.log(err);
            })
          }
      }
    }
</script>

<style scoped>
.AddSong h2{
  text-align: center;
}



.s{
  width: 600px;
}

</style>
